<template>



    <div class="container">

        <el-row class="bread">
             面包写导航
        </el-row>
        <el-row class="query">
             搜索区
        </el-row>
        <el-row>
             <el-button-group>
                 <el-button type="success" @click="btnAddClick">添加</el-button>
                 <el-button type="info">打印</el-button>
                 <el-button type="primary">导出</el-button>
             </el-button-group>

            <el-table :data="list">
                <el-table-column prop="name" label="标题"></el-table-column>
                <el-table-column prop="age" label="年龄"></el-table-column>

                <el-table-column  label="操作">
                    <template #default="scope">
                        <!--
                           情景色：
                               success
                               warning
                               danger
                               info
                               primary
                        -->
                        <el-button type="info"  @click="btnEditClick(scope.row)">修改</el-button>
                        <el-button type="danger" @click="btnRemoveClick(scope.row.id)">删除</el-button>
                    </template>

                </el-table-column>

            </el-table>

        </el-row>
    </div>


    <el-dialog v-model="info.isVisible"
     title="添加">

        <el-form label-width="180">

            <el-form-item label="员工姓名">
                <el-input></el-input>
            </el-form-item>

            <el-form-item label="员工单位">
                <el-input></el-input>
            </el-form-item>

            <el-button type="success">确定</el-button>

        </el-form>

    </el-dialog>

</template>

<script>
    export default {
        name: "Table",
        data(){

            return{

                info:{
                   isVisible:false
                },
                list:[
                    {
                        id:1,
                        name:'L',
                        age:34
                    },{
                        id:2,
                        name:'M',
                        age:45
                    },{
                        id:3,
                        name:'N',
                        age:56
                    }
                ]
            }
        },methods:{

             btnEditClick(row){

                 //通过row给页面赋值
                 this.info.isVisible = true;
             },

             btnRemoveClick(id){

                  if(confirm("是否删除档期数据")){
                       alert("id :" + id+ "数据已经删除！")
                  }
             },btnAddClick() {
                   this.info.isVisible = true;
            }
        }
    }


    /*
     *  上 -- logo
      *  左-右
    * */
</script>

<style scoped>

     .bread {
          width: 100%;
          height: 80px;
          background-color: rgba(164, 185, 18, 0.37);
          border: 1px solid;
     }

    .query{
        width: 100%;
        height: 160px;
        background-color: rgba(164, 185, 18, 0.37);
        border: 1px solid;
    }

</style>